<template>
	<tr>
		<td data-th="goods">
			<div class="row">
				<div class="col-sm-2 d-none d-sm-block">
					<img :src="shoppingItem.thumbnail_url" alt="..." class="img-fluid"/>
				</div>
				<div class="col-sm-10">
					<h4 class="nomargin">{{ shoppingItem.title }}</h4>
					<p>{{ shoppingItem.description }}</p>
				</div>
			</div>
		</td>
		<td data-th="Price">{{ shoppingItem.price }}</td>
		<td data-th="Quantity">
			<input type="number" class="form-control text-center"
				:value="shoppingItem.quantity"
				@input="updateQuantity"
				min="0">
		</td>
		<td data-th="Subtotal" class="text-center">￥{{ subtotal }}</td>
		<td class="actions" data-th="">
			<button class="btn my-btn btn-danger btn-sm" @click="removeItem"><i class="fa fa-trash-o"></i></button>
		</td>
	</tr>
</template>

<script>
import { useStore } from 'vuex'
import { computed } from '@vue/runtime-core'
import { ref } from 'vue'
export default {
	props: ['shoppingItem'],
	// props: {
	// 	shoppingItem: Object,
	// },
	setup(props) {
		const store = useStore()
		let shoppingItem = ref(props.shoppingItem)
		let subtotal = computed(() => { return parseFloat(shoppingItem.value.quantity * shoppingItem.value.price).toFixed(2); })
		const updateShoppingList = ({item, quantity, isAdd}) => {
			store.dispatch('updateShoppingList', {item, quantity, isAdd})
		}

		const removeItemShopping = ({item}) => {
			store.dispatch('removeItemShopping', {item})
		}

		const removeItem = () => {
			removeItemShopping({
				item: props.shoppingItem
			});
		}

		const updateQuantity = (event) => {
			updateShoppingList({
				item: props.shoppingItem,
				quantity: parseInt(event.target.value),
				isAdd: false
			});
		}

		return {
			subtotal,
			updateShoppingList,
			removeItemShopping,
			removeItem,
			updateQuantity
		}
	}
}
</script>
<style scoped>
.my-btn {
	width: 29px;
	height: 31px;
}
</style>

